<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>日志查看系统</title>
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/bootstrap-3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/bootstrap-3.3.5/css/bootstrap-theme.min.css">
    <script src="${pageContext.request.contextPath}/bootstrap-3.3.5/js/jquery-1.11.2.min.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#fileFilter').keyup(function(){
                debugger
                /*
                * 1.get data
                * 2.split to array
                * 3.receive true data
                * 4.update css
                * */
                var hasData = new Array;
                var noData = new Array;
                temp = '${fileList}';  //get data
                var tempArr = temp.substring(1, temp.length - 1).split(',');
                if($('#fileFilter').val()==''){
                    for(var i = 0;i<= tempArr.length;i++){
                        var temp = '#tr'+i;
                        $(temp).show();
                    }
                }else{
                    for (var i = 0, len = tempArr.length; i < len; i++) {
                        if (tempArr[i].indexOf($('#fileFilter').val()) > 0) {
                            hasData.push(i);
                        } else {
                            noData.push(i);
                        }
                    }
                    //option
                    for (var i = 0; i <= noData.length; i++) {
                        var temp = '#tr' + noData[i];
                        $(temp).hide();
                    }

                    for (var i = 0; i <= hasData.length; i++) {
                        var temp = '#tr' + hasData[i];
                        $(temp).show();
                    }
                }
            });

            //将div居中显示
//            var browHeight1 = $(window).height();  //获取浏览器高度
//            var top = (browHeight1 - 620) / 2 + "px";  //计算上面的top偏离数据
//            if (browHeight1 > 620) {  //针对小屏不进行操作（否则将会悬停在浏览器上方）
//                $("#questionPlan").css({"margin-top": top});  //设置top偏离数据
//            }
//            //调节兼容性
//            $(window).resize(function () {
//                //将div居中显示
//                var browHeight1 = $(window).height();  //获取浏览器高度
//                var top = (browHeight1 - 620) / 2 + "px";  //计算上面的top偏离数据
//                if (browHeight1 > 620) {  //针对小屏不进行操作（否则将会悬停在浏览器上方）
//                    $("#questionPlan").css({"margin-top": top});  //设置top偏离数据
//                }
//            });
        });
    </script>
</head>
<body style="margin-top: 38px">
<nav class="navbar navbar-inverse  navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <a class="navbar-brand" class="active" href="index.jsp">返回首页</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" id="fileFilter" class="form-control" placeholder="输入文件名过滤">
                </div>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a class="active" href="#">${info}</a></li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
</nav>

<div align="center" style="padding-top: 30px">
    <div style="width: 800px;">
        <table id="ctable"
               class="table table-bordered table-hover table-condensed">
            <tr align="center">
                <td>序号</td>
                <td>文件名称</td>
                <td>选择行数查看</td>
            </tr>
            <!--  loop begin -->
            <c:forEach var="item" items="${fileList}" varStatus="status">
                <tr class="active" align="center" id="tr${status.index}">
                    <td id="fid">${status.index+1}</td>
                    <td id="fname"><span style="color: red"><strong>${item}</strong></span></td>
                    <td>
                        <form action="showFile">
                            <input type="hidden" name="filePath" value="${filePath}"/>
                            <input type="hidden" name="fileName" value="${item}"/>
                            <%--<input type="text" name="lineNum"/>--%>
                            <select name="lineNum" >
                                <option value="10">10</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                                <option value="200">200</option>
                            </select>
                            <input class="btn btn-primary" type="submit" value="查看"/>
                        </form>
                    </td>
                </tr>
            </c:forEach>
            <!-- loop end  -->
        </table>
    </div>
</div>
<div>
        <div align="center">版权所有 fesine@pactera.com</div>
</div>
</body>
</html>